<template>
  <div class="">
    <div class="flex justify-between min-w-full mb-8">
      <el-carousel
        ref="headBanner"
        indicator-position="outside"
        :class="['w-full']"
        :autoplay="true"
        height="38rem"
        style="position: relative"
        @change="bannerImgChange"
      >
        <el-carousel-item v-for="item in bannerList" :key="item.id">
          <a :href="item.redirectUrl">
            <el-image
              style="width: 100%; height: 100%"
              :src="item.picture"
            ></el-image>
          </a>
        </el-carousel-item>
      </el-carousel>
    </div>
    <div class="w-1200-container content-container">
      <div class="main-box">
        <div class="border shadow-md">
          <router-select-strip
            listPropVName="dictLabel"
            :active-id.sync="queryParams.confirmyear"
            :screenList="yearList"
            label="认定年度"
            @itemClick="handleConfirmYear"
          />
        </div>
        <ul class="info-list">
          <li v-for="item in infoList" :key="item.id" class="li-box">
            <a href="" class="info-item">
              <div class="main">
                <h6>{{ item.title }}</h6>
                <div class="text-t999">
                  <i class="el-icon-time"></i>
                  <span> {{ item.startTime }} - {{ item.endTime }} </span>
                </div>
              </div>
              <div class="aside">已结束</div>
            </a>
          </li>
        </ul>
      </div>
      <ul class="aside-box">
        <li class="aside-item gradient-red">
          <h5 class="full-title">瞪羚独角兽政策</h5>
        </li>
        <li class="aside-item gradient-blue">
          <h5 class="full-title">申报常见问题</h5>
        </li>
        <li class="aside-item gradient-green">
          <h5 class="full-title">瞪羚自评测</h5>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import RouterSelectStrip from "@/components/HeadScreenStrip/RouterSelectStrip.vue";

export default {
  components: {
    RouterSelectStrip,
  },
  data() {
    return {
      queryParams: {
        confirmyear: undefined,
      },
      bannerList: [
        {
          picture: require("@/assets/images/img-placeholder.jpg"),
          redirectUrl: "",
          id: 3,
        },
      ],
      yearList: [
        { dictValue: 0, dictLabel: "2021" },
        { dictValue: 1, dictLabel: "2020" },
        { dictValue: 2, dictLabel: "2019" },
        { dictValue: 3, dictLabel: "2018" },
      ],
      infoList: [
        {
          id: 1,
          title: "2020年度江西省瞪羚企业认定申报",
          startTime: "2020-09-15",
          endTime: "2020-11-15",
        },
        {
          id: 2,
          title: "2020年江西省潜在瞪羚企业认定申报",
          startTime: "2020-09-15",
          endTime: "2020-11-15",
        },
        {
          id: 3,
          title: "2020年江西省独角兽企业认定申报",
          startTime: "2020-09-15",
          endTime: "2020-11-15",
        },
      ],
    };
  },
  methods: {
    handleConfirmYear() {},
    // 轮播图 handler change
    bannerImgChange(e) {
      this.activeBannerIndex = e;
    },
  },
};
</script>

<style lang="scss" scoped >
.aside-item {
  @apply w-full h-28 rounded-md mb-6 pl-12 transition-all duration-300 cursor-pointer bg-gradient-to-r;
  .full-title {
    @apply w-full h-full flex items-center text-white;
  }
}
.gradient-red {
  @apply from-red-500 to-red-300;
}
.gradient-green {
  @apply from-green-500 to-green-300;
}
.gradient-blue {
  @apply from-blue-500 to-blue-300;
}

.info-list {
  .li-box:not(:last-of-type) {
    .info-item {
      @apply border-dashed border-b;
    }
  }

  .info-item {
    @apply flex p-6 items-stretch;

    .main {
      min-height: 70px;
      @apply flex-1 flex-grow flex flex-col justify-between;
    }
    .aside {
      min-height: 70px;
      min-width: 115px;
      width: 115px;
      height: 100%;
      height: 100%;
      @apply flex flex-col justify-center  text-2xl text-t999 pl-6 font-medium border-l border-dashed;
    }
  }
}
</style>